<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <style>
	 .box{
	 	width:100%;
	 	height:600px;
	 	position:relative;
	 	background-color:red;
	 }
	 .box1{
	 	width:100%;
	 	height:400px;
	 	position:absolute;
	 	background-color:green;
	 	top:50%;
	 }
	 .box2{
	 	width:50%;
	 	height:300px;
	 	position:relative;
	 	background-color:blue;
	 	top:-50%;
	 }
	 .content{
	 	width:400px;
	 	height:200px;
	 	background-color:yellow;
	 }
	 .tablebox{
	 	display:table;
	 }
	 .cellBox{
	 	display:table-cell;
	 	vertical-align:middle;
	 }
	 </style>
</head>
<body>
	<!-- <h1>绝对定位使div垂直居中-有问题</h1>
	<div class="box">
		<div class="box1">
			<div class="box2">
				<div class="content">
					我是内容
				</div>
			</div>
		</div>
	</div> -->
	<h1>使用display:table布局使div垂直居中</h1>
	<div class="tablebox" style="width:100%;height:200px;background-color:red;">
		<div class="cellBox" style="height:100px;">
			<div style="background:url(1.jpg) no-repeat center center;width:300px;height:180px;"></div>
		</div>
		<div class="cellBox" style="border-right:1px solid black;height: 80px;
    padding-right: 20px;
    margin-right: 20px;">
			<div >好好学习，天天向上</div>
			<div >与人交流要热情</div>
		</div>
		<div class="cellBox" style="border-right:1px solid black;">
			<div >多研究点问题 </div>
			<div >少看一点电视</div>
		</div>
	</div>
</body>
</html>